
import React, { Component, PropTypes } from 'react';
import { View, StyleSheet, Dimensions, LayoutAnimation } from 'react-native';
import { h, Base, CusComponents } from 'yzt-react-base';
import { FsTouch, AppConst } from '../../YZTFlagshipBase/index';
const { YztImage, YztText } = CusComponents;
const _windows = Dimensions.get('window');


// YZTButtonTypeCustom
// YZTButtonTypeGlobalStyle
// YZTButtonTypeGlobalBorderStyle


class YZTButton extends Component {
    static propTypes = {
        title: PropTypes.string.isRequired,
        select: PropTypes.bool,
        index: PropTypes.number,
        buttonStyle: PropTypes.object,
        clickAction: PropTypes.func
    };

    constructor(props) {
        super(props);
        this.onPressButton = this.onPressButton.bind(this);
    }

    _setButtonFrame(){
     const { width=h(480), height=h(96), isRound=true, buttonStyle='YZTButtonTypeCustom'  }  = this.props.buttonStyle;



    }



    onPressButton = ()=>{
        if (this.props.title){
            this.props.clickAction(this.props.index);
        }
    };

    render(){
        let color = this.props.select?'#2d4486':'#96a1c2';
        return (
            <FsTouch
                key={this.props.index}
                onPress={this.onPressButton}
            >
                <View style={styles.button}>
                    <YztText style={[styles.buttonTitle, {backgroundColor:color}]}> {this.props.title} </YztText>
                </View>
            </FsTouch>
        );
    }
}

const styles = StyleSheet.create({
    button: {
        justifyContent: 'center',
        alignItems: 'center',
    },
    buttonTitle: {
        fontSize:h(32),
        color:'#FFFFFF',
        height:h(52),
        paddingLeft:h(20),
        paddingRight:h(12),
        paddingTop:h(6),
        borderWidth:h(2),
        borderRadius:h(26)
    }
});

export default YZTButton;